@use "sass:map";

// 认证页面通用样式
.auth-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;

  // 移动端样式
  @media (max-width: 768px) {
    padding: 16px; background-image: url('../assets/bbbggg2.png');
    background-size: 100% 100%;
    background-repeat: no-repeat; background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
  }
}

.auth-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  padding: 40px;
  width: 100%;
  max-width: 420px;

  // 移动端样式
  @media (max-width: 768px) {
    padding: 24px 20px;
    border-radius: 12px;
    margin: 0 16px;
  }
}

.auth-header {
  text-align: center;
  margin-bottom: 15px;

  .logo {
    width: 80px;
    height: 80px;
    margin-bottom: 16px;

    @media (max-width: 768px) {
      width: 60px;
      height: 60px;
      margin-bottom: 12px;
    }
  }

  .title {
    font-size: 28px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;

    @media (max-width: 768px) {
      font-size: 24px;
    }
  }

  .subtitle {
    font-size: 14px;
    color: #666;
    margin: 0;

    @media (max-width: 768px) {
      font-size: 13px;
    }
  }
}

.auth-form {
  .van-field {
    margin-bottom: 20px;

    @media (max-width: 768px) {
      margin-bottom: 16px;
    }
  }
}

.code-btn {
  height: 32px;
  font-size: 12px;
  border-radius: 16px;

  @media (max-width: 768px) {
    height: 28px;
    font-size: 11px;
  }
}

.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;

  @media (max-width: 768px) {
    margin-bottom: 20px;
  }

  .forgot-link {
    color: #667eea;
    font-size: 14px;

    @media (max-width: 768px) {
      font-size: 13px;
    }
  }

  .terms-link {
    color: #667eea;
    font-size: 14px;
    padding: 0 2px;

    @media (max-width: 768px) {
      font-size: 13px;
    }
  }
}

.submit-section {
  margin-bottom: 24px;

  @media (max-width: 768px) {
    margin-bottom: 20px;
  }

  .submit-btn {
    height: 48px;
    font-size: 16px;
    font-weight: 500;

    @media (max-width: 768px) {
      height: 44px;
      font-size: 15px;
    }

    &:disabled {
      opacity: 0.6;
    }
  }
}

.auth-footer {
  text-align: center;
  font-size: 14px;
  color: #666;

  @media (max-width: 768px) {
    font-size: 13px;
  }

  .link-btn {
    color: #667eea;
    margin-left: 4px;
  }
}

// Vant组件样式覆盖
:deep(.van-field__label) {
  color: #333;
  font-weight: 500;
}

:deep(.van-field__control) {
  font-size: 14px;
}

:deep(.van-button--primary) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

:deep(.van-checkbox__label) {
  color: #666;
  font-size: 14px;
  line-height: 1.4;
}

:deep(.van-field__button) {
  margin-left: 8px;
}

// 响应式断点
$breakpoints: (
  mobile: 768px,
  tablet: 1024px,
  desktop: 1200px
);

@mixin respond-to($breakpoint) {
  @if map.has-key($breakpoints, $breakpoint) {
    @media (max-width: map.get($breakpoints, $breakpoint)) {
      @content;
    }
  }
}

// 移动端优化
@include respond-to(mobile) {
  .auth-container {
    padding: 16px;
  }

  .auth-card {
    padding: 24px 20px;
    border-radius: 12px;
    margin: 0 16px;
  }

  .auth-header {
    .logo {
      width: 60px;
      height: 60px;
      margin-bottom: 12px;
    }

    .title {
      font-size: 24px;
    }

    .subtitle {
      font-size: 13px;
    }
  }

  .auth-form {
    .van-field {
      margin-bottom: 16px;
    }
  }

  .form-actions,
  .submit-section {
    margin-bottom: 20px;
  }

  .submit-btn {
    height: 44px;
    font-size: 15px;
  }

  .auth-footer {
    font-size: 13px;
  }
}